<!DOCTYPE html>
<html>
<head>
<style>
  .test-div
  {
    width: 100px;
    height: 100px;
    text-align: center;
    background-color: gray;
  }
  .test-img
  {
    width: 50px;
    height: 50px;
    backface-visibility: hidden;
  }
</style>
<script>
  /* Function to draw a 50x50 white opaque square with the upper-left quadrant
     red with a specified style */
  function addTestImg(style) {
    var imgData = "";
    document.write("<img style=\"" + style + "\" src=\"" + imgData + "\" width=50px height=50px class=\"test-img\"/>");
  }
</script>
</head>
<body>

<table><tr>

<!-- This test draws a img which is facing the screen. -->

<td>
  <div class="test-div">
    <script>addTestImg("")</script>
  </div>
</td>

<!-- This test draws a single-sided img facing away from the screen.  This
     should not appear. -->

<td>
  <div class="test-div">
    <script>addTestImg("transform: rotateY(180deg);")</script>
  </div>
</td>

<!-- This test rotates the div away from the screen, but keeps the 
     single-sided img facing towards its div.  This should appear. -->

<td>
  <div class="test-div" style="transform: rotateY(180deg)">
    <script>addTestImg("")</script>
  </div>
</td>

</tr><tr>

<!-- This test draws a img inside a div which is double-sided and does not 
     face the screen.  This should not appear because preserve-3d is set for
     the parent div. -->

<td>
  <div class="test-div" style="transform: rotateY(180deg); -webkit-transform-style: preserve-3d;">
    <script>addTestImg("")</script>
  </div>
</td>

<!-- This test draws a img inside a div which is single-sided and does not
     face the screen.  This should appear because preserve-3d is set for the
     parent div. -->

<td>
  <div class="test-div" style="transform: rotateY(180deg); -webkit-transform-style: preserve-3d; backface-visibility: hidden;">
    <script>addTestImg("transform: rotateY(180deg);")</script>
  </div>
</td>

<!-- This test draws a img inside a div which is single-sided and does not
     face the screen.  This should not appear because preserve-3d is not set
     for the parent div.  -->

<td>
  <div class="test-div" style="transform: rotateY(180deg); backface-visibility: hidden;">
    <script>addTestImg("transform: rotateY(180deg);")</script>
  </div>
</td>

</tr></table>

</body>
</html>
